import React, { Component } from "react";
// import ReactEcharts from "echarts-for-react";
// 引入 ECharts 主模块
import echarts from "echarts/lib/echarts";
// 引入柱状图
import "echarts/lib/chart/bar";
// 引入提示框和标题组件
import "echarts/lib/component/tooltip";
import "echarts/lib/component/title";
import "echarts/lib/component/legend";
import "echarts/lib/component/legend";

import { Container } from "./style";

// import connect from './connect'
// @connect
class index extends Component {
  componentDidMount() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      legend: {},
      //tooltip（提示框组件）
      tooltip: {},
      //toolbox（工具栏组件）
      toolbox:{},
      dataset: {
        source: [
          ["product", "本年", "本月", "本周"],
          ["A4打印纸", 143, 105, 53],
          ["黑色签字笔", 123, 93, 45],
          ["粉笔", 96, 74, 33],
          ["五号电池", 72, 53, 28],
          ["宽胶带", 52, 23, 19],
        ],
      },
      //xAxis（直角坐标系 X 轴）
      xAxis: { type: "category" },
      //yAxis（直角坐标系 Y 轴）
      yAxis: {},
      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      //series（系列）
      series: [
        {
          type: "bar",
          // barWidth: "15%" ,
          // barMaxWidth: "20%",
        },
        { 
          type: "bar", 
          // barMaxWidth: "20%" 
        },
        { 
          type: "bar", 
          // barMaxWidth: "20%" 
        },
      ],
    });
  }
  

  render() {
    return (
      <Container>
        <div id="main" style={{ width: 590, height: 330 }}></div>
      </Container>
    );
  }
}

export default index;
